<template>
	<view class="content">
		<u-sticky :offsetTop="0" :customNavHeight="0">
			<view class="info-con">
				<view class="user-lista">
					<u-avatar :src="src" size="55"></u-avatar>
					<view class="list-texta">
						<view style="font-weight: 500;color: #fff;font-size: 31rpx;">
							<u--text color="#fff" mode="name" :text="selectUser.patientName" format="encrypt"></u--text>
						</view>
						<view style="display: flex;align-items: center;">
							<view>就诊卡号：</view>
							<u--text color="#ffffff" size="23rpx" mode="name" :text="selectUser.userCard"
								format="encrypt"></u--text>
						</view>
						<view>证件类型：住院号</view>
					</view>
					<view class="user-buta" @click="show=true">更换就诊人</view>
				</view>
				<view class="tab">
					<view class="tab-item" :class="index === tabIndex?'active':''" v-for="(item,index) in tabList"
						:key="index" @click="changTab(item,index)">{{item.name}}
					</view>
					<view class="tab-other" :class="startTime?'tab-time':''" @click="activeOpen">
						<view style="color: #0082FF;" v-if="startTime">{{startTime}}</view>
						<view v-else style="margin-right: 5rpx;">自定义</view>
						<u-icon v-if="!startTime" color="#C8CBCD" name="calendar"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>
		<view v-if="dataList.allCost" class="log-total">
			<view class="total-c"></view>
			<view style="margin-left: 15rpx;">{{this.startDate}}该日消费总金额：</view>
			<view style="color: #FF1212;">{{dataList.allCost}}</view>
		</view>
		<view v-if="dataList.allCost" style="margin-top: 23rpx;">
			<uni-table ref="table" border stripe>
				<uni-tr>
					<uni-th width="300rpx" align="center">名称</uni-th>
					<uni-th width="150rpx" align="center">单价</uni-th>
					<uni-th width="150rpx" align="center">数量</uni-th>
					<uni-th width="150rpx" align="center">总价</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in dataList.data" :key="index">
					<uni-td align="center">{{ item.itemName }}</uni-td>
					<uni-td align="center">
						<view style="color: #FF1212;">¥{{item.itemPrice}}</view>
					</uni-td>
					<uni-td align="center">{{ item.itemCount }}</uni-td>
					<uni-td align="center">
						<view style="color: #FF1212;">¥{{item.itemTotalMoney}}</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view v-if="isEmpty" class="refund-empty">
			<image src="../../static/img/noRecords.png" style="width: 615rpx;height: 615rpx;"></image>
			<view style="margin-top: 15rpx;">暂无记录</view>
		</view>
		<u-popup :show="show" mode="bottom" :round="10" @close="show = false">
			<view class="pop-con">
				<view class="pop-title">选择就诊人</view>
				<scroll-view scroll-y="true" class="scroll-y">
					<view class="user-list" v-for="(item,index) in userList" :key="index">
						<u-avatar :src="src" size="55"></u-avatar>
						<view class="list-text">
							<view style="font-weight: 500;color: #000000;font-size: 31rpx;">
								<u--text mode="name" :text="item.patientName" format="encrypt"></u--text>
							</view>
							<view style="display: flex;align-items: center;">
								<view>就诊卡号：</view>
								<u--text color="#999999" size="23rpx" mode="name" :text="item.userCard"
									format="encrypt"></u--text>
							</view>
							<view>证件类型：住院号</view>
						</view>
						<view style="margin-left: auto;width: 128rpx;">
							<u-button type="primary" :plain="true" shape="circle" text="确定"
								@click="changeUser(item)"></u-button>

						</view>
					</view>
				</scroll-view>
				<view class="book-but">
					<u-button type="primary" text="添加就诊人" @click="goPage('/pages/bookrecord/bookrecord')"></u-button>

				</view>
			</view>
		</u-popup>
		<uv-calendars :date="activityValue" color="#0082FF" ref="activityCalendar" @confirm="activityConfirm"
			:insert="false"></uv-calendars>
	</view>
</template>

<script>
	import {
		userlistApi,
		recordsApi
	} from "@/api/user"
	export default {
		data() {
			return {
				isEmpty: false,
				dataList: {},
				selectUser: {},
				userList: [],
				activityValue: '',
				startTime: '',
				tabIndex: 0,
				startDate: '',
				src: '',
				show: false,
				current: 0,
				time: '',
				tabList: [{
						name: '今日',
						startDate: ''
					},
					{
						name: '昨日',
						startDate: ''
					},
				]
			}
		},
		onLoad() {
			this.startDate = this.GetDateStr(0)
			this.tabList[0].startDate = this.GetDateStr(0)
			this.tabList[1].startDate = this.GetDateStr(-1)
			console.log(this.GetDateStr(-1));
			this.getUser()
		},
		methods: {
			async getUser() {
				let userInfo = uni.getStorageSync('userInfo')
				const res = await userlistApi({
					userId: userInfo.id,
					pageNum: 1,
					pageSize: 100,
					patientType: 2
				})
				this.userList = res.rows
				if (this.userList.length) {
					if (uni.getStorageSync('hospitalUser')) {
						this.selectUser = uni.getStorageSync('hospitalUser')
						this.getList()
					} else {
						this.selectUser = this.userList[0]
						uni.setStorageSync('hospitalUser', this.userList[0])
						this.getList()
					}
				} else {
					uni.redirectTo({
						url: '/pages/bookrecord/bookrecord'
					})
				}

			},
			changeUser(item) {
				this.selectUser = item
				uni.setStorageSync('hospitalUser', item)
				this.getList()
				this.show = false
			},
			async getList() {
				uni.showLoading({
					title: '加载中...'
				})
				try {
					this.dataList = {}
					this.isEmpty = false
					const res = await recordsApi({
						id: this.selectUser.id,
						type: 5,
						startDate: this.startDate,
					})
					this.dataList = res.data
					uni.hideLoading()
					// this.isEmpty = !this.dataList.length
				} catch (e) {
					console.log('errro', e);
					uni.hideLoading()
					this.isEmpty = true
				}


			},
			GetDateStr(AddDayCount) {
				var dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
				var y = dd.getFullYear();
				var m = ('0' + (dd.getMonth() + 1)).slice(-2); //获取当前月份的日期
				var d = ('0' + dd.getDate()).slice(-2);
				return y + "-" + m + "-" + d
			},
			changTab(item, index) {
				this.tabIndex = index
				this.startDate = item.startDate
				this.activityValue = ''
				this.startTime = ''
				this.getList()
			},
			activeOpen() {
				this.$refs.activityCalendar.open()
			},
			activityConfirm(e) {
				console.log(e);
				this.startTime = e.fulldate
				this.startDate = e.fulldate
				this.activityValue = e.fulldate
				this.tabIndex = ''
				this.getList()

			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100%;
		box-sizing: border-box;
		background: #F8F8F8;
		color: #666666;
		font-size: 27rpx;
		padding-bottom: calc(23px + env(safe-area-inset-bottom));
	}

	.info-con {
		width: 750rpx;
		padding: 0 31rpx;
		padding-top: 23rpx;
		box-sizing: border-box;
		background: #FFFFFF;
	}



	.user-lista {
		width: 688rpx;
		height: 185rpx;
		background: linear-gradient(135deg, #05A2FF 0%, #0CCFFF 100%);
		border-radius: 19rpx;
		padding: 31rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 23rpx;
	}

	.list-texta {
		height: 100%;
		margin-left: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.user-buta {
		margin-left: auto;
		width: 146rpx;
		height: 62rpx;
		background: #FFFFFF;
		border-radius: 31rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #05A2FF;
	}

	.tab {
		width: 688rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;
		box-sizing: border-box;
		display: flex;
		color: #333333;
		font-size: 26rpx;

	}

	.tab-item {
		line-height: 96rpx;
		margin-right: 20rpx;
		position: relative;
		width: 229rpx;
		text-align: center;
	}

	.active {
		color: #0082FF;
	}

	.tab-other {
		width: 229rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.pop-con {
		padding: 31rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pop-title {
		width: 100%;
		text-align: center;
		font-weight: 500;
		color: #000000;
		font-size: 31rpx;
	}

	.scroll-y {
		height: 400rpx;
		width: 688rpx;
		margin-top: 31rpx;
		box-sizing: border-box;
	}

	.user-list {
		width: 688rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		padding-left: 19rpx;
		padding-right: 29rpx;
		padding-top: 23rpx;
		padding-bottom: 44rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 23rpx;
		box-shadow: 0px 0 13rpx 0px rgba(5, 162, 255, 0.11);
		color: #999999;
		font-size: 23rpx;
	}

	.list-text {
		height: 100%;
		margin-left: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.book-but {
		width: 688rpx;
		height: 85rpx;
		margin: 0 auto;
		margin-top: 31rpx;
	}

	.refund-empty {
		margin-top: 52rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999999;
		font-size: 27rpx;

	}

	.log-total {
		margin-top: 31rpx;
		margin-left: 31rpx;
		display: flex;
		align-items: center;
		font-size: 27rpx;
		color: #000000;
	}

	.total-c {
		width: 15rpx;
		height: 15rpx;
		background-color: #007aff;
		border-radius: 50%;
	}
</style>